<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="widget" uri="/widget" %>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/<spring:theme code="stylesheet.wraper" />" />

<div class="wraper">
    <div class="inner-menu">
        <div class="header">
            <span><spring:message code="docrepository.friend.title.myFriends" /></span>
            <a href="#" class="pull-right" title="<spring:message code="docrepository.friend.action.addGroup" />"><i class="glyphicon glyphicon-plus"></i></a>
        </div>
        <a href="javascript:void(0);" class="item" id=""><spring:message code="docrepository.friend.title.allFriends" /></a>
        <c:forEach items="${userGroupsList}" var="userGroup">
            <a href="javascript:void(0);" class="item" id="${userGroup.groupId}"><c:out value="${userGroup.groupName}" /></a>
        </c:forEach>
        <a href="javascript:void(0);" class="item" id="notGrouped"><spring:message code="docrepository.friend.title.notGrouped" /></a>
    </div>

    <div class="content">
        <div class="header">
            <span class="groupName"></span>
            <a href="" class="pull-right"><i class="glyphicon glyphicon-plus" title="<spring:message code="docrepository.friend.action.addFriend" />"></i></a>
        </div>
        <div class="cardlist">
        </div>
    </div>
</div>
<script style="text/javascript">
var userFriend = userFriend || {
	userFriends: {},
	populateUserFriends: function(data){  //构造页面上好友列表
		if(data){
			// 首先清空数据
			$('.cardlist').empty();
			if(data.length <= 0){
			} else {
				$.each(data, function(index, item){
					$('<div>', {
						id: 'friend_' + item['userFriendId'],
						'class': 'item',
						html: [$('<div>', {
							'class': 'avatar',
							html: '<a href=""><img src="' + (item['avatar'] || '') + '" /></a>'
						}), $('<div>', {
							'class': 'info',
							html: [$('<div>', {
								'class': 'name',
								href: '',
								html: item['friendName'] || ''
							}), $('<div>', {
								'class': 'edit',
								html: '<i class="glyphicon glyphicon-edit"></i>'
							}).bind('click', {friend: item}, userFriend.editUserFriendName)]
						}), $('<div>', {
							'class': 'action',
							html: [$('<div>', {
								'class': '',
								html: '<i class="glyphicon glyphicon-envelope"></i><spring:message code="docrepository.message.action.sendMessage" />'
							}), $('<div>', {
								'class': 'text-danger',
								html: '<i class="glyphicon glyphicon-minus"></i><spring:message code="docrepository.friend.action.removeFriend" />'
							}).bind('click', {friend: item}, userFriend.removeUserFriend)]
						})]
					}).appendTo('.cardlist');
				});
			}
		}
	},
	editUserFriendName: function(e){  //编辑用户好友备注姓名
		var that = this;
		var nameEl = $(that).prev('div.name');
	    if(nameEl && nameEl.length > 0){
	    	var nameInput = $('<input>', {
	    		type: 'text'
	    	}).val(e.data.friend['friendName']).focus().focusout(function(){
	    		// 保存数据
	    		var name = $(this).val();
	    		if(name && name != e.data.friend['friendName']){
	    			$.ajax({
		    			type: 'POST',
						url: '<widget:resourceUrl mode="/user/friends/editUserFriendName" />',
						data: {'userFriendId': e.data.friend['userFriendId'], 'friendName': name},
						success: function(response){
							// 解析数据
							if(response){
								if(response.resultCode){
									$(nameEl).text(e.data.friend['friendName']);
									return;
								}
								$(nameEl).text(name);
								// 清除前台缓存
								if(userFriend.userFriends && userFriend.userFriends[e.data.friend['groupId']]){
									userFriend.userFriends[e.data.friend['groupId']] = [];
								}
							}
						}, 
						error: function(){
							$(nameEl).text(e.data.friend['friendName']);
						}
		    		});
	    		}
	    		$(nameEl).text(name);
	    	});
	    	nameEl.html(nameInput);
	    	nameInput.focus();
	    }
	},
	removeUserFriend: function(e){ //删除好友
		BootstrapDialog.show({
			title: '<spring:message code="docrepository.friend.action.removeFriend" />',
			message: '<spring:message code="docrepository.friend.prompt.removeFriendConfirm" />',
			buttons: [{
				label: '<spring:message code="docrepository.common.action.confirm" />',
				cssClass: 'btn-primary',
				action: function(dialogRef){
					if(e.data.friend['userFriendId']){
						$.ajax({
			    			type: 'POST',
							url: '<widget:resourceUrl mode="/user/friends/removeUserFriend" />',
							data: {'userFriendId': e.data.friend['userFriendId']},
							success: function(response){
								// 解析数据
								if(response){
									if(response.resultCode){
										return;
									}
									
									$('#friend_' + e.data.friend['userFriendId']).remove();
									// 清除前台缓存
									if(userFriend.userFriends && userFriend.userFriends[e.data.friend['groupId']]){
										userFriend.userFriends[e.data.friend['groupId']] = [];
									}
								}
							}
			    		});
					}
					dialogRef.close();
				}
			}, {
				label: '<spring:message code="docrepository.common.action.cancel" />',
				cssClass: 'btn-default',
				action: function(dialogRef){
					dialogRef.close();
				}
			}]
		});
	}
};
$(function(){
	// 绑定事件
	$('.inner-menu>.item').click(function(){
		var groupName = $(this).html();
		if(groupName){
			$('.groupName').html(groupName);
		}
		
		var userFriendList = [];
		var groupId = $(this).attr('id');
		if(userFriend.userFriends){
			if(!groupId){
				for(var userGroupId in userFriend.userFriends){
					if(userFriend.userFriends[userGroupId]){
						userFriendList = userFriendList.concat(userFriend.userFriends[userGroupId]);
					}
				}
			} else{
				if(userFriend.userFriends[groupId]){
					userFriendList = userFriend.userFriends[groupId];
				}
			}
		}
		if(!userFriendList || userFriendList.length <= 0){
			// 根据groupId获取群组用户
			$.ajax({
				type: 'POST',
				url: '<widget:resourceUrl mode="/user/friends/listUserFriends" />',
				data: {'groupId': groupId},
				success: function(data){
					// 解析数据
					if(data){
						var json = $.parseJSON(data);
						if(json && json.length > 0){
							userFriend.populateUserFriends(json);
							if(groupId){
								userFriend.userFriends[groupId] = json;
							}
						}
					}
				}
			});
		} else{
			userFriend.populateUserFriends(userFriendList);
		}
		$(this).addClass('active').siblings('a.item').removeClass('active');
	});
	
	$('.inner-menu>.item').first().trigger('click');
});
</script>